<!--
 * @Description: 柱状图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:28
-->
<template>
  <div>
    <div ref="barCanvas" class="bar-container"></div>
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';
import {get} from '@/utils/request'

export default {
  data() {
    return {
      title: '环境工程',
      valueData: [], // 存储图表数据
      barChart: null, // 存储 Bar 图表实例
    };
  },
  watch: {
    valueData: {
      handler(newVal) {
        if (this.barChart) {
          this.barChart.changeData(newVal);
        }
      },
      deep: true
    }
  },
  computed: {},
  methods: {
      
      // 异步获取数据
      async getValueData() {
        try {
          const res = await get('/dashboard/queryEngineerBindDeviceNumber');
          console.log(res, '获取value响应');
          if (res.data && res.data.length) {
          this.valueData = res.data.map(item => ({
            type: item.type || '未知类型',
            value: Number(item.value) || 0
          }));
        }
        } catch (error) {
          console.error('获取数据失败:', error);
        }
      },
      initChart() {
      if (!this.$refs.barCanvas) return;

      this.barChart = new Column(this.$refs.barCanvas, {
        data: this.valueData,
        xField: 'type',
        yField: 'value',
        seriesField:'type',
        autoFit: true,
        padding: [20, 40, 60, 60],
        interactions: [{ type: 'active-region' }],
        color: ['#A9D08E', '#FFB347', '#B19CD9', '#87CEEB', '#2A52BE'],
        columnStyle:{
          radius: [8, 8, 0, 0] // 顶部圆角设置 
        },
        yAxis:{
          min: 0,
          max: 2,
          tickInterval: 0.5,       // 按0.5间隔
          grid: {
            line: {
              style: {
                stroke: '#f0f0f0' // 浅灰色网格线
            }
          }
         }
        },
        xAxis: {
          label: {
            autoRotate:true,
            style: {
              fontSize: 12,
              fill: '#666',
            },
            formatter: (text) => 
              text.length > 4 ? `${text.slice(0, 4)}...` : text
          }
        },
        tooltip: {
          domStyles: {
            'g2-tooltip': {
              backgroundColor: '#fff',
              color: '#333',
              boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
            }
          }
        },
        theme: {
      colors10: [              // 主题色覆盖
        '#A9D08E', '#FFB347',
        '#B19CD9', '#87CEEB',
        '#2A52BE'
           ]
         }
      });
      this.barChart.render();
    }
    },

  
    
  created() {},
  async mounted() {
    await this.getValueData(); // 页面挂载时获取数据
    this.initChart();
  },
  beforeDestroy() {
    if (this.barChart) {
      this.barChart.destroy();
      this.barChart = null;
    }
  }
};
</script>
<style scoped>
.bar-container {
  width: 100%;
  height: 200px;
  position: relative;
}
.bar-container > div {
  width: 100% !important;
  height: 200px !important;
}
</style>